@import '~scss/variables';

.main {
  padding: 0;
  box-shadow: $base-shadow;
  overflow: hidden;

  &:hover {
    box-shadow: $base-shadow !important;
  }
}

.header {
  display: flex;
  padding: 20px;
  box-shadow: 0 1px 0 0 rgba(196, 205, 213, 0.7);

  :global(.icon) {
    margin-right: 20px;
  }

  a {
    margin: 0 5px;
  }
}

.title {
  margin-bottom: 1px;
  font-size: $size-normal;
  font-weight: 600;
  line-height: 1.43;
}

.text {
  color: $second-text-color;
  line-height: 1.67;
}

.list {
  padding: 20px;
  background-color: $bg-color;

  .item {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    padding: 12px 20px;
    background-color: $white;
    border-radius: 4px;
    transition: all $trans-speed;
    cursor: pointer;

    &:last-child {
      margin-bottom: 0;
    }

    &:hover {
      box-shadow: 0 8px 16px 0 rgba(33, 43, 54, 0.2);
    }

    & > div {
      pointer-events: none;
    }

    .icon {
      width: 24px;
      height: 24px;
      border: 5px solid #d8dee5;
      border-radius: 50%;
      background: transparent;
      margin-right: 20px;

      &.checked {
        position: relative;
        justify-content: center;
        align-items: center;
        background-color: $primary;
        border-color: $primary;

        :global(.icon) {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          width: 20px;
          height: 20px;
        }
      }
    }

    .operations {
      position: absolute;
      top: 50%;
      right: 20px;
      height: 32px;
      transform: translate(0, -50%);
      pointer-events: auto;

      button {
        margin: 0;

        &:hover {
          background-color: $light;
        }
      }
    }
  }
}
